<template>
  <div id="printArea" style="padding: 12px">
    <div
      v-for="(pitem, pindex) in tableDatas"
      :key="pindex"
      class="printContainer"
    >
      <el-row>
        <el-col
          :span="24"
          style="
            position: relative;
            display: flex;
            flex-direction: column;
            font-size: 20px;
            text-align: center;
          "
        >
          <span style="padding: 4px 0">中国人民解放军总医院第一医学中心</span>
          <b style="padding: 4px 0">输血科交叉配血检验报告单</b>
          <span style="position: absolute; right: 0; font-size: 12px">
            DBT301-TR-BB-98
          </span>
          <div class="code">
            <vue-barcode
              v-if="bloodMatch"
              :display-value="false"
              :height="40"
              :value="bloodMatch.apply_num"
              :width="1.2"
            >
              条码信息加载失败
            </vue-barcode>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="h12"></div> -->
      <div class="row" style="display: flex; margin: 12px 0; font-size: 12px">
        <span>
          编号：
          <b>{{ bloodMatch.MATCH_SHEET_NUM }}</b>
        </span>
        <span style="margin-left: auto">
          申请单号：
          <b>{{ bloodMatch.APPLY_NUM }}</b>
        </span>
      </div>
      <el-row style="padding: 1px 0">
        <el-col :span="6">
          <span class="font12">
            科别：
            <span class="underline">{{ bloodMatch.DEPT_NAME }}</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            受血者：
            <span class="underline">{{ bloodMatch.PAT_NAME }}</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            血型/Rh(D)：
            <span class="underline">
              {{ getAboValue(bloodMatch.PAT_BLOOD_GROUP) }}/{{
                getRhValue(bloodMatch.RH)
              }}
            </span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            直抗：
            <span class="underline">
              {{ bloodMatch.DAT || '' }}
            </span>
          </span>
        </el-col>
      </el-row>
      <el-row style="padding: 1px 0">
        <el-col :span="6">
          <span class="font12">
            ID号：
            <span class="underline">{{ bloodMatch.PATIENT_ID }}</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            住院号：
            <span class="underline">{{ bloodMatch.INP_NO }}</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            性别：
            <span class="underline">{{ bloodMatch.PAT_SEX }}</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            日期：
            <span class="underline">
              {{ substr(bloodMatch.BIRTHDAY, 0, 10) }}
            </span>
          </span>
        </el-col>
      </el-row>
      <el-row style="padding: 1px 0">
        <el-col :span="12">
          <span class="font12">
            诊断：
            <span class="underline">{{ bloodMatch.BLOOD_DIAGNOSE }}</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            样本类型：
            <span class="underline">静脉血</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span class="font12">
            采集时间：
            <span class="underline">
              {{ substr(bloodMatch.GATHER_DATE, 0, 10) }}
            </span>
          </span>
        </el-col>
      </el-row>
      <div style="height: 6px !important"></div>
      <div class="table">
        <table>
          <thead>
            <tr>
              <td align="center" rowspan="2">
                血袋号
                <br />
                配血试管
              </td>
              <td align="center" rowspan="2">
                血型
                <br />
                Rh(D)
              </td>
              <td align="center" rowspan="2">
                献血者
                <br />
                血员号
              </td>
              <td align="center" rowspan="2">标本位置</td>
              <td align="center" rowspan="2">血量(U)</td>
              <td align="center" rowspan="2">血液成分</td>
              <td align="center" rowspan="2">配血方式</td>
              <td
                align="center"
                :colspan="bloodMatchTypeName === 'hxb' ? 3 : 2"
              >
                配血结果
              </td>
              <td align="center" rowspan="2" width="50">
                终配血
                <br />
                结果
              </td>
              <td align="center" rowspan="2">配血者</td>
            </tr>
            <tr v-if="bloodMatchTypeName === 'hxb'">
              <td align="center">主侧</td>
              <td align="center">次侧</td>
              <td align="center" width="50">结果</td>
            </tr>
            <tr v-else>
              <td align="center">凝集强度</td>
              <td align="center" width="50">结果</td>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in pitem">
              <tr :key="index">
                <td
                  align="center"
                  :rowspan="getRowSpan(item)"
                  style="height: 40px"
                >
                  {{ item.BLOOD_ID }}
                  <br />
                  {{ item.BLOOD_ID_UP || '' }}
                </td>
                <td align="center" :rowspan="getRowSpan(item)">
                  {{ getAboValue(item.BLOOD_GROUP) }}
                  <br />
                  {{ getRhValue(item.RH) }}
                </td>
                <td align="center" :rowspan="getRowSpan(item)">
                  {{ item.NAME }}
                  <br />
                  {{ item.BLOOD_DONOR_ID }}
                </td>
                <td align="center" :rowspan="getRowSpan(item)">
                  {{ item.SPECIMEN_POSITION }}
                </td>
                <td align="center" :rowspan="getRowSpan(item)">
                  {{ item.BLOOD_CAPACITY }}
                </td>
                <td align="center" :rowspan="getRowSpan(item)">
                  {{ item.BLOOD_TYPE_NAME }}
                </td>
                <td
                  align="center"
                  :style="
                    item.blood_match_types.length > 1
                      ? { borderColor: '#fff' }
                      : ''
                  "
                >
                  {{
                    getBloodMatchType(
                      item.blood_match_types[0],
                      'blood_match_type_name'
                    )
                  }}
                </td>
                <template v-if="bloodMatchTypeName === 'hxb'">
                  <td
                    align="center"
                    :style="
                      item.blood_match_types.length > 1
                        ? { borderColor: '#fff' }
                        : ''
                    "
                  >
                    {{
                      getBloodMatchType(
                        item.blood_match_types[0],
                        'FIRST_RESULT'
                      )
                    }}
                  </td>
                  <td
                    align="center"
                    :style="
                      item.blood_match_types.length > 1
                        ? { borderColor: '#fff' }
                        : ''
                    "
                  >
                    {{
                      getBloodMatchType(
                        item.blood_match_types[0],
                        'SECOND_RESULT'
                      )
                    }}
                  </td>
                </template>
                <template v-else>
                  <td
                    align="center"
                    :style="
                      item.blood_match_types.length > 1
                        ? { borderColor: '#fff' }
                        : ''
                    "
                  >
                    {{
                      getBloodMatchType(
                        item.blood_match_types[0],
                        'AGGREGATION_INTENSITY'
                      )
                    }}
                  </td>
                </template>
                <td
                  align="center"
                  :style="
                    item.blood_match_types.length > 1
                      ? { borderColor: '#fff' }
                      : ''
                  "
                >
                  {{
                    getBloodMatchType(item.blood_match_types[0], 'MATCH_RESULT')
                  }}
                </td>
                <td align="center" :rowspan="getRowSpan(item)">
                  {{ item.MATCH_RESULT }}
                </td>
                <td align="center" :rowspan="getRowSpan(item)">
                  {{ item.MATCH_RESULT ? item.MATCH_OPERATOR : '' }}
                </td>
              </tr>
              <tr
                v-for="(citem, cindex) in item.blood_match_types.slice(1)"
                :key="index + '-' + cindex"
              >
                <td
                  align="center"
                  :style="
                    cindex < item.blood_match_types.length - 2
                      ? { borderColor: '#fff' }
                      : ''
                  "
                >
                  {{ getBloodMatchType(citem, 'blood_match_type_name') }}
                </td>
                <template v-if="bloodMatchTypeName === 'hxb'">
                  <td
                    align="center"
                    :style="
                      cindex < item.blood_match_types.length - 2
                        ? { borderColor: '#fff' }
                        : ''
                    "
                  >
                    {{ getBloodMatchType(citem, 'FIRST_RESULT') }}
                  </td>
                  <td
                    align="center"
                    :style="
                      cindex < item.blood_match_types.length - 2
                        ? { borderColor: '#fff' }
                        : ''
                    "
                  >
                    {{ getBloodMatchType(citem, 'SECOND_RESULT') }}
                  </td>
                </template>
                <template v-else>
                  <td
                    align="center"
                    :style="
                      cindex < item.blood_match_types.length - 2
                        ? { borderColor: '#fff' }
                        : ''
                    "
                  >
                    {{ getBloodMatchType(citem, 'AGGREGATION_INTENSITY') }}
                  </td>
                </template>
                <td
                  align="center"
                  :style="
                    cindex < item.blood_match_types.length - 2
                      ? { borderColor: '#fff' }
                      : ''
                  "
                >
                  {{ getBloodMatchType(citem, 'MATCH_RESULT') }}
                </td>
              </tr>
            </template>
            <template v-if="pitem.length < 5">
              <tr v-for="i in 5 - pitem.length" :key="`record${i}`">
                <td style="height: 40px"></td>
                <td></td>
                <td></td>
                <td v-if="bloodMatchTypeName === 'hxb'"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="h12"></div>
      <el-row style="margin-top: 8px; font-size: 12px">
        <el-col :span="4">输出者：{{ username }}</el-col>
        <el-col :span="4">复核者：</el-col>
        <el-col :span="8">打印日期：{{ time }}</el-col>
        <el-col :span="8">配血日期：{{ bloodMatch.MATCH_DATE }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { getCurrentTime } from '@/utils'
  import { mapGetters } from 'vuex'
  import VueBarcode from 'vue-barcode'
  export default {
    components: {
      VueBarcode,
    },
    data() {
      return {
        user: this.$store.getters.name,
        time: getCurrentTime(),
        bloodMatch: {},
        BLOOD_TYPE_NAME: '',
      }
    },
    computed: {
      ...mapGetters({
        username: 'user/username',
      }),
      tableDatas() {
        let res = this.bloodMatch.BLOODS || [this.bloodMatch]
        const tableData = res.map((val) => {
          if (!val.blood_match_types) {
            val.blood_match_types = [{}, {}]
          }
          if (val.blood_match_types.length === 0) {
            val.blood_match_types = [
              {
                FIRST_RESULT: '',
                SECOND_RESULT: '',
                blood_match_type_name: '',
                MATCH_RESULT: '',
                DAT: '',
              },
              {
                FIRST_RESULT: '',
                SECOND_RESULT: '',
                blood_match_type_name: '',
                MATCH_RESULT: '',
                DAT: '',
              },
            ]
          }
          return val
        })
        if (tableData.length > 5) {
          return [tableData.slice(0, 5), tableData.slice(5, 10)]
        }
        return [tableData]
      },
      bloodMatchTypes() {
        let res = (this.bloodMatch && this.bloodMatch.blood_match_types) || []
        if (res.length === 0) {
          res = [{}]
        }
        return res
      },

      bloodMatchTypeName() {
        if (
          this.BLOOD_TYPE_NAME.indexOf('红细胞') > -1 ||
          this.BLOOD_TYPE_NAME === '浓缩血小板'
        ) {
          return 'hxb'
        } else {
          return 'xxb'
        }
      },
    },
    methods: {
      show(row) {
        this.bloodMatch = row
        this.BLOOD_TYPE_NAME = row.BLOOD_TYPE_NAME
      },
      getAboValue(value) {
        if (value) {
          return value + '型'
        }
        return ''
      },
      getRhValue(value) {
        if (value) {
          return { '+': '阳性', '-': '阴性' }[value] || ''
        }
        return ''
      },
      substr(str, start, len) {
        if (str) {
          return str.substr(start, len)
        }
        return ''
      },
      getRowSpan(item) {
        return item.blood_match_types.length
      },
      getBloodMatchType(item, namekey) {
        const blood_match_type = item
        let value = blood_match_type[namekey] || ''
        if (
          ['FIRST_RESULT', 'SECOND_RESULT', 'AGGREGATION_INTENSITY'].includes(
            namekey
          )
        ) {
          value =
            (value && Array.isArray(value) && value.join(',')) || value || ''
        }
        if (namekey === 'MATCH_RESULT') {
          value = item['MATCH_RESULT'] || ''
        }
        return value
      },
    },
  }
</script>

<style lang="scss" scoped>
  .report-wrapper {
    padding: 12px;
    font-family: Microsoft YaHei !important;
    font-size: 12px !important;
    color: #000 !important;
    span {
      font-size: 12px !important;
      &.underline {
        padding-bottom: 1px;
        margin-left: 4px;
        border-bottom: grey 1px solid;
      }
    }
  }
  #printArea {
    margin: 0 12px;
    color: #000 !important;
    .printContainer:first-child {
      padding-bottom: 20px;
      border-bottom: 1px dashed #999;
    }
    .printContainer:last-child {
      padding-top: 20px;
    }
  }
  table {
    width: 70%;
    border-collapse: collapse; /* 取消表格边框 */
    border-top: 1px solid #333;
  }
  table,
  th,
  tr,
  td {
    border-bottom: 1px solid #333; /* 表格横线 */
  }

  .table {
    * {
      // font-family: '宋体';
      font-size: 12px;
      line-height: 18px;
      color: #000;
    }

    table {
      width: 100%;
      border-collapse: collapse;

      td,
      th {
        height: 20px;
        vertical-align: center;
      }
    }
    .empty {
      line-height: 40px;
      text-align: center;
      border: 1px solid #000;
      border-top: none;
    }
    input {
      width: 100%;
      height: 30px;

      font-size: 12px;
      line-height: 12px;

      border: none;
      border-bottom: 1px solid #000000;

      &:focus {
        outline: 1px solid #999999;
      }
    }

    .table {
      th {
        font-size: 15px;
      }
    }

    .foot {
      padding-top: 20px;
    }
  }
  img,
  .code {
    position: absolute;
    top: 15px;
    right: 0;
    span {
      display: inline-block;
      width: 200px;
      text-align: center;
    }
  }
</style>
